<template>
	<uni-popup ref="popup" type="center" :safe-area="false" :is-mask-click="false">
		<view class="box">
			<view @click="close" class="box_close l-f l-row-c" hover-class="hover-class">
				<uni-icons type="closeempty" size="40rpx" color="#ffffff"></uni-icons>
			</view>
			<view class="box_title">视频录制完成啦</view>
			<view class="box_item l-f">
				<view>
					<image class="box_item_icon" src="@/static/images/index_record_video.png" mode="widthFix"></image>
				</view>
				<view class="box_item_info l-f l-column l-row-sb">
					<view class="box_item_info_name l-line1">{{record.name}}</view>
					<view class="box_item_info_size">{{record.size}}mb</view>
				</view>
			</view>
			<view class="box_btn l-f l-row-sb">
				<view 
				@click="onUpdate(1)"
				class="box_btn_item" 
				hover-class="hover-scale" 
				:hover-stay-time="100">流量上传</view>
				<view 
				@click="onUpdate(2)"
				class="box_btn_item" 
				hover-class="hover-scale" 
				:hover-stay-time="100">wifi上传</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"record-finish",
		props: {
			record: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			onUpdate(type) {
				this.$emit('update',type)
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	width: 630rpx;
	height: 670rpx;
	border-radius: 60rpx;
	background: linear-gradient(to bottom,rgba(11, 12, 13, 1),rgba(53, 54, 56, 1));
	box-shadow: inset 0 2rpx 2rpx 0px rgba(255, 255, 255, 0.25);
	padding: 38rpx;
	box-sizing: border-box;
	position: relative;
	&_close {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
	&_title {
		margin-top: 56rpx;
		font-size: 38rpx;
		color: #ffffff;
		font-weight: 700;
		text-align: center;
	}
	&_item {
		margin-top: 136rpx;
		height: 192rpx;
		background: url("@/static/images/record_item.png") no-repeat;
		background-size: 100% 100%;
		padding: 30rpx;
		box-sizing: border-box;
		&_icon {
			width: 130rpx;
			height: 130rpx;
		}
		&_info {
			margin-left: 75rpx;
			height: 100%;
			&_name {
				font-size: 34rpx;
				color: #ffffff;
				font-weight: 700;
			}
			&_size {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	&_btn {
		margin-top: 60rpx;
		&_item {
			width: 240rpx;
			height: 108rpx;
			background: linear-gradient(to bottom,rgba(72, 228, 239, 1),rgba(43, 206, 181, 1));
			font-size: 30rpx;
			color: #ffffff;
			border-radius: 60rpx;
			text-align: center;
			line-height: 108rpx;
		}
	}
}
</style>